<template>
  <div >
    <section class="row">
      <div class="small-6 columns">
        <h1 class="text-center">你</h1>
        <div class="healthbar">
          <div class="healthbar text-center"
               :style="{width:playerHealth+'%'}"
               style="background-color: green; margin: 0; color: white;">
            {{playerHealth}}
          </div>
        </div>
      </div>
      <div class="small-6 columns">
        <h1 class="text-center">怪兽</h1>
        <div class="healthbar">
          <div class="healthbar text-center"
               :style="{width:monsterHealth+'%'}"
               style="background-color: green; margin: 0; color: white;">
            {{monsterHealth}}
          </div>
        </div>
      </div>
    </section>
    <section class="row controls">
      <div class="small-12 columns">
        <button id="start-game" @click="startGame">开始游戏</button>
      </div>
    </section>
    <section class="row controls" v-if="gameIsRunning">
      <div class="small-12 columns">
        <button id="attack" @click="attack">攻击</button>
        <button id="special-attack" @click="specialAttack">特殊攻击</button>
        <button id="heal" @click="heal">加血</button>
        <button id="give-up" @click="giveUp">放弃</button>
      </div>
    </section>
    <section class="row log" v-if="turns.length>0">
      <div class="small-12 columns">
        <ul>
          <li v-for="turn in turns" :class="{'player-turn':turn.isPlayer,'monster-turn':!turn.isPlayer}">
            {{turn.text}}
          </li>
        </ul>
      </div>
    </section>
  </div>
</template>
<script>

  export default {
    data(){
      return{
        gameIsRunning:false,
        playerHealth:100,
        monsterHealth:100,
        monsterMin:5,
        monsterMax:12,
        playerMin:2,
        playerMax:10,
        healCount:10,
        specialAttackCount:10,
        healTime:5,
        specialAttackTime:5,
        turns:[]
      }
    },
    methods:{
      startGame:function(){
        this.gameIsRunning = true;
        this.baseData();
        this.turns = [];
      },
      attack:function(){
        var damage = this.calculateDamage(this.playerMin,this.playerMax);
        this.monsterHealth -= damage;

        this.turns.unshift({
            isPlayer:true,
            text:'你对怪兽造成了'+damage+"伤害"
        });

        if(this.checkWin()){
          return;
        }
        this.monsterAttack();
      },
      monsterAttack:function(){
        var damage = this.calculateDamage(this.monsterMin,this.monsterMax);
        this.playerHealth -= damage;
        this.turns.unshift({
          isPlayer:false,
          text:'怪兽对你造成了'+damage+"伤害"
        });
        this.checkWin();
      },
      specialAttack:function(){
        this.specialAttackTime --;
        if(this.specialAttackTime<=0){
          alert("特殊攻击用完了");
          return;
        }
        var damage = this.specialAttackCount;
        this.monsterHealth -= damage;
        this.turns.unshift({
          isPlayer:true,
          text:'你使用【特殊攻击】对怪兽造成了'+damage+"伤害"
        });
        if(this.checkWin()){
          return;
        }
        this.monsterAttack();
      },
      heal:function(){
        this.healTime --;
        if(this.healTime<=0){
          alert("加血用完了");
          return;
        }

        if (this.playerHealth <= 90) {
          this.playerHealth += this.healCount
        } else {
          this.playerHealth = 100;
        }

        this.turns.unshift({
          isPlayer:true,
          text:'你使用【加血】回复了10血量'
        });

        this.monsterAttack();
      },
      giveUp:function(){
        this.gameIsRunning = false;
        this.baseData();
        this.turns = [];
      },
      calculateDamage:function(min,max){
        var damage = Math.max(Math.floor(Math.random()*max+1),min);
        return damage;
      },
      checkWin:function(){
        if(this.monsterHealth<=0){
          console.log("你输了");
          if(confirm("你赢了,再来一把?")){
            this.startGame();
          }else{
            if(this.monsterHealth<0){
              this.monsterHealth = 0;
            }
            this.gameIsRunning = false;
          }
          return true;
        }else if(this.playerHealth<=0){
          console.log("你输了");
          if(confirm("你输了,再来一把?")){
            this.startGame();
          }else{
            if (this.playerHealth<0) {
              this.playerHealth = 0;
            }
            this.gameIsRunning = false;
          }
          return false;
        }
      },
      baseData:function(){
        this.playerHealth = 100;
        this.monsterHealth = 100;
        this.monsterMin=5;
        this.monsterMax=12;
        this.playerMin=2;
        this.playerMax=10;
        this.healCount=10;
        this.specialAttackCount=10;
        this.healTime=5;
        this.specialAttackTime=5;
      }
    }
  }
</script>
<style>

  .text-center {
    text-align: center;
  }

  .healthbar {
    width: 80%;
    height: 40px;
    background-color: #eee;
    margin: auto;
    transition: width 500ms;
  }

  .controls, .log {
    margin-top: 30px;
    text-align: center;
    padding: 10px;
    border: 1px solid #ccc;
    box-shadow: 0px 3px 6px #ccc;
  }

  .turn {
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 22px;
  }

  .log ul {
    list-style: none;
    font-weight: bold;
    text-transform: uppercase;
  }

  .log ul li {
    margin: 5px;
  }

  .log ul .player-turn {
    color: blue;
    background-color: #e4e8ff;
  }

  .log ul .monster-turn {
    color: red;
    background-color: #ffc0c1;
  }

  button {
    font-size: 20px;
    background-color: #eee;
    padding: 12px;
    box-shadow: 0 1px 1px black;
    margin: 10px;
  }

  #start-game {
    background-color: #aaffb0;
  }

  #start-game:hover {
    background-color: #76ff7e;
  }

  #attack {
    background-color: #ff7367;
  }

  #attack:hover {
    background-color: #ff3f43;
  }

  #special-attack {
    background-color: #ffaf4f;
  }

  #special-attack:hover {
    background-color: #ff9a2b;
  }

  #heal {
    background-color: #aaffb0;
  }

  #heal:hover {
    background-color: #76ff7e;
  }

  #give-up {
    background-color: #4444;
  }

  #give-up:hover {
    background-color: #c7c7c7;
  }
</style>
